<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <ui:composition template="layout.xhtml">
        <ui:define name="body">

            <h:form id="bairroForm" enctype="multipart/form-data">
                <p:panel styleClass="withoutBorder" rendered="#{!managerLayout.desabilitarMapa() and managerMapaBairro.connect}">
                    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true" />
                </p:panel>

                <h3 class="title">Mapa por Bairro</h3>
                <p:growl id="messages" showDetail="false" autoUpdate="true"/> 

                <h4 class="title">Clique em um bairro para ver mais detalhes !</h4>
                <p:panel id="geoPanel" style="width: 64% !important; float: left" 
                         styleClass="container_24 clearfix withoutBorder">
                    <div class="buttonAction"> 
                        <p:gmap id="map" center="#{managerMapaBairro.centroMapa}" zoom="#{managerMapaBairro.zoomLevelMapa}" 
                                type="ROADMAP" rendered="#{!managerLayout.desabilitarMapa() and managerMapaBairro.connect}"
                                style="width:100%;height:500px" model="#{managerMapaBairro.mapModel}" > 
                            <p:ajax event="overlaySelect" listener="#{managerMapaBairro.onPolygonSelect}" 
                                    update=":bairroForm:dados, :bairroForm:imoveis" />
                        </p:gmap>

                        <p:outputLabel value="O Georreferenciamento foi desabilitado pois não foi possível estabelecer uma conexão com a Internet !"
                                       rendered="#{!managerLayout.desabilitarMapa() and !managerMapaBairro.connect}"/>

                        <p:outputLabel value="O Georreferenciamento foi desabilitado pelo administrador do sistema !"
                                       rendered="#{managerLayout.desabilitarMapa()}"/>
                    </div>
                </p:panel>

                <p:blockUI id="blockDados" block=":bairroForm:dados" trigger=":bairroForm:map" > 
                    <p:graphicImage value="media/images/ajax-loader.gif"/>
                </p:blockUI>

                <p:blockUI id="blockImoveis" block=":bairroForm:imoveis" trigger=":bairroForm:map" > 
                    <p:graphicImage value="media/images/ajax-loader.gif"/>
                </p:blockUI>

                <p:panel id="dados" style="width: 30% !important; float: right;" styleClass="container_24 clearfix withoutBorder" >

                    <h4 class="title">Dados do bairro #{managerMapaBairro.bairro.nome}</h4>

                    <fieldset>
                        <legend>Quantidade de Imóveis</legend>
                        <p:inputText value="#{managerMapaBairro.qtdImoveisBairro}" readonly="true"
                                     styleClass="grid_24 textResumoBairro"/>
                    </fieldset>
                    <div class="clear" />

                    <fieldset>
                        <legend>Quantidade de Pessoas</legend>
                        <p:inputText value="#{managerMapaBairro.qtdPessoas}" readonly="true"
                                     styleClass="grid_24 textResumoBairro"/>
                    </fieldset>
                    <div class="clear" />

                    <fieldset>
                        <legend>Renda média</legend>
                        <p:inputText value="#{managerMapaBairro.rendaFamiliar.nome.concat(' salário(s) mínimo(s)')}" 
                                     readonly="true"
                                     styleClass="grid_24 textResumoBairro"/>
                    </fieldset>
                    <div class="clear" />

                    <fieldset>
                        <legend>Bolsa Família</legend>
                        <p:inputText value="#{managerMapaBairro.qtdBolsaFamilia}" readonly="true"
                                     styleClass="grid_24 textResumoBairro"/>
                    </fieldset>
                    <div class="clear" />

                    <fieldset>
                        <legend>Patrimônio</legend>
                        <p:pieChart title="Patrimônio" value="#{managerMapaBairro.pieModel}" legendPosition="s" legendCols="3"
                                    showDataLabels="true" style="width: 102%" dataFormat="value" styleClass="grid_14"/>
                    </fieldset>
                </p:panel>

                <p:panel id="imoveis" styleClass="container_24 clearfix withoutBorder" 
                         style="float: right; display: block; width: 64%; text-align: center"
                         header="Imóveis #{managerMapaBairro.qtdImoveisBairro ne null and managermapabairro.qtdImoveisBairro ne 0 ? '('.concat(managerMapaBairro.qtdImoveisBairro).concat(')') : ''}">
                    <p:dataTable id="tableImovel" var="item" value="#{managerMapaBairro.imoveis}" 
                                 styleClass="grid_24" rowIndexVar="rowid" 
                                 style="white-space: pre-wrap; width: 100%"
                                 rowKey="#{item.id}" rows="5" paginator="true"  
                                 paginatorPosition="bottom" emptyMessage="Nenhum registro">

                        <p:column headerText="Ação" width="120">
                            <p:button title="Editar"
                                      href="editarimovel.xhtml?eImovel=#{item.id}"
                                      icon="ui-icon-pencil"/>
                            <p:button title="Visualizar"
                                      href="visualizarimovel.xhtml?vImovel=#{item.id}"
                                      icon="ui-icon-zoomin"/>
                        </p:column>

                        <p:column headerText="Localização" width="250">  
                            <h:outputText value="Logradouro #{item.enderecoImovel.logradouro}, Nº #{item.enderecoImovel.numero}" />
                            <br/>
                        </p:column>
                        <p:column headerText="Proprietário" width="450" style="white-space: pre-wrap;">  
                            <h:outputText style="#{managerPesquisarImovel.proprietarios(item) eq '' ? 'color: red;' : ''}"
                                          value="#{managerPesquisarImovel.proprietarios(item) eq '' ? 'Proprietário Pendente' : managerPesquisarImovel.proprietarios(item)}"/>
                        </p:column> 
                    </p:dataTable> 
                </p:panel>
            </h:form>

        </ui:define> 
    </ui:composition>



</html>
